<template>
	<view>
		横向布局:
		<view class="row">
			<view class="box bg-blue">A</view>
			<view class="box bg-green">B</view>
			<view class="box bg-red">C</view>
		</view>
		纵向布局:
		<view class="coloum">
			<view class="box2 bg-blue">D</view>
			<view class="box2 bg-blue">E</view>
			<view class="box2 bg-blue">F</view>
		</view>
		其他布局:
		(1)居中
		<view class="row other-box-center">
			<view class="item">横向布局-居中</view>
			<view class="item">横向布局-居中</view>
		</view>
		<view>居右</view>
		<view class="row other-box-right">
			<view class="item">横向布局-居右</view>
			<view class="item">横向布局-居右</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
		}
	}
</script>

<style>
	.box {
		height: 200upx;
		width: 33.3%;
		text-align: center;
		/*水平居中*/
		line-height: 200upx;
		/*行间距与框高度一致，实现垂直居中*/
		color: #FFFFFF;
		/*文本颜色*/
	}	
	.box2{
		height: 200upx;
	}
	.bg-red {
		background-color: #aa0000;
	}
	.bg-blue {
		background-color: #007AFF;
	}
	.bg-green {
		background-color: #4CD964;
	}
	.row {
		display: flex;
		flex-direction: row;
		/*默认横排显示*/
	}
	.coloum{
		display: flex;
		flex-direction: column-reverse;
	}
	/*其他布局的样式*/
	.item{
		height: 80upx;
		line-height: 80upx;
		background-color: #e3e3ea;
		margin: 10upx;
		padding: 10upx;
	}
	.other-box-center{
		justify-content: center;
		-webkit-justify-content:center;
	}
	.oter-box-right{
		justify-content: flex-end;
		-webkit-justify-content:flex-end;
	}
</style>
